<template>
    <div class="wrapper">

        <v-head></v-head>
        <v-sidebar></v-sidebar>
        <div class="content no_left" id="content">

            <vv-taps></vv-taps>
            <!--<mu-paper class="demo-paper" :zDepth="1" >-->
            <div class="main-area" id="main-area"  v-loading="isLoading" element-loading-text="正在加载数据">
                <canvas id="canvas" class="canvas"/>
                <div id="acture">
                    <transition name="el-fade-in-linear" mode="out-in">
                        <keep-alive :include="/keepalive[a-zA-Z]+/">
                            <router-view></router-view>
                        </keep-alive>
                    </transition>
                </div>
            </div>
            <!--</mu-paper>-->
        </div>
        <div>
            <el-dialog
                    :title="updateInfo"
                    :visible.sync="isDialogSHow"
                    size="small"
                    :before-close="handleClose">

                <!--<img src="../../../static/img/add.png" alt="">-->
                <div style="text-align: center;padding: 20% 0;">
                    <el-progress type="circle" :percentage="percentNum"></el-progress>
                </div>

                <!--<span slot="footer" class="dialog-footer">-->
                    <!--<el-button @click="isDialogSHow = false">取 消</el-button>-->
                    <!--<el-button type="primary" @click="isDialogSHow = false">确 定</el-button>-->
                <!--</span>-->
            </el-dialog>

        </div>
    </div>
</template>

<script>
    import * as type from '../../store/types';
    import vHead from './Header.vue';
    import vSidebar from './Sidebar.vue';
    import vvTaps from './taps.vue';
//    import vDialogcomp from './DialogComp.vue';
    import 'element-ui/lib/theme-default/index.css';
    export default {
        data(){
            return {
                loading2:true,
                isDialogSHow:false,
                updateInfo:'',
                percentNum:0,
                name:'',
                currentName:''
            }
        },
        components:{
            vHead, vSidebar,vvTaps
        },
        computed:{
            isLoading:function () {
                let loading =   this.$store.state.allLoadIng;
                return loading;
            },
        },
        mounted() {

            let self = this;
//                const ipc = window.require('electron').ipcRenderer;
//                ipc.send('check-for-update');
            this.percent();
            var canvas = document.querySelector('canvas'),
                ctx = canvas.getContext('2d')
            canvas.width = window.innerWidth;
            canvas.height = 860;
            ctx.lineWidth = .3;
            ctx.strokeStyle = (new Color(150)).style;

            // var mousePosition = {
            // 	x: 30 * canvas.width / 100,
            // 	y: 30 * canvas.height / 100
            // };
            var mousePosition = {
                x:  canvas.width - 100,
                y:  canvas.height - 60
            };

            var dots = {
                nb: 50,
                distance: 5,
                d_radius: 150,
                array: []
            };

            function colorValue(min) {
                return Math.floor(Math.random() * 255 + min);
            }

            function createColorStyle(r,g,b) {
                return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
            }

            function mixComponents(comp1, weight1, comp2, weight2) {
                return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
            }

            function averageColorStyles(dot1, dot2) {
                var color1 = dot1.color,
                    color2 = dot2.color;

                var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
                    g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
                    b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
                return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
            }

            function Color(min) {
                min = min || 0;
                this.r = colorValue(min);
                this.g = colorValue(min);
                this.b = colorValue(min);
                this.style = createColorStyle(this.r, this.g, this.b);
            }

            function Dot(){
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;

                this.vx = -.5 + Math.random();
                this.vy = -.5 + Math.random();

                this.radius = Math.random() * 2;

                this.color = new Color();
            }

            Dot.prototype = {
                draw: function(){
                    ctx.beginPath();
                    ctx.fillStyle = this.color.style;
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                    ctx.fill();
                }
            };

            function createDots(){
                for(let i = 0; i < dots.nb; i++){
                    dots.array.push(new Dot());
                }
            }

            function moveDots() {
                for(let i = 0; i < dots.nb; i++){

                    let dot = dots.array[i];

                    if(dot.y < 0 || dot.y > canvas.height){
                        dot.vx = dot.vx;
                        dot.vy = - dot.vy;
                    }
                    else if(dot.x < 0 || dot.x > canvas.width){
                        dot.vx = - dot.vx;
                        dot.vy = dot.vy;
                    }
                    dot.x += dot.vx;
                    dot.y += dot.vy;
                }
            }

            function connectDots() {
                for(let i = 0; i < dots.nb; i++){
                    for(let j = 0; j < dots.nb; j++){
                        let i_dot = dots.array[i];
                        let j_dot = dots.array[j];

                        if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
                            if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
                                ctx.beginPath();
                                ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
                                ctx.moveTo(i_dot.x, i_dot.y);
                                ctx.lineTo(j_dot.x, j_dot.y);
                                ctx.stroke();
                                ctx.closePath();
                            }
                        }
                    }
                }
            }

            function drawDots() {
                for(let i = 0; i < dots.nb; i++){
                    let dot = dots.array[i];
                    dot.draw();
                }
            }

            function animateDots() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                moveDots();
                connectDots();
                drawDots();

                requestAnimationFrame(animateDots);
            }

            //----------------------跟着鼠标动--------------------
            document.getElementById('content').addEventListener('mousemove', function(e){
                mousePosition.x = e.pageX;
                mousePosition.y = e.pageY;
            });

            document.getElementById('content').addEventListener('mouseleave', function(e){
                mousePosition.x = canvas.width / 2;
                mousePosition.y = canvas.height / 2;
            });
            //----------------------跟着鼠标动--------------------

            createDots();
            requestAnimationFrame(animateDots);
            this.$$("#canvas").attr("width",5000);



        },
        methods: {
//            getName(val){
//                alert(222)
////                that.$emit('transferCurrentName', val);
//                this.currentName=val;
//            },
            percent(){
                let self= this;
                var timer=setInterval(function(){
                    self.percentNum ++;
                    if(self.percentNum==99){
                        clearInterval(timer)
                    }
                },500);
            },

            handleClose(done) {
                done();
            },
        }
    }
</script>
<style scoped>
    .wrapper{
        background:#eeeeee;
    }
    .main-area{
        margin-top: 40px;
        /*padding-top: 115px;*/
        padding-top: 40px;
    }
    .demo-paper {
        display: inline-block;

        width: 110%;
        margin: 0;
        text-align: center;
    }
    #acture {
        margin-top: -905px;
    }
    .progress-circle{
        margin-top: 20%;

        text-align: center;
    }
    .progress-content{
        /*width: 30%;*/
        /*height:30%;*/
        margin: 0 auto;
    }
</style>
